<template>
  <el-row>
    <el-col>
      <el-table :data="collections" style="width: 100%">
        <el-table-column prop="id" v-if="false"/>
        <el-table-column label="集合名称" prop="name"/>
        <el-table-column label="创建时间" prop="createTime"/>
        <!-- <el-table-column label="操作" prop="opt" /> -->
        <el-table-column align="right">
          <template #header>
            <!-- <el-input
              v-model="search"
              size="small"
              placeholder="Type to search"
              @input="filterTableData"
            /> -->
            <el-button type="primary" @click="addCollection"
            >新增
            </el-button
            >
            <el-button type="success" @click="handleUpdate">刷新</el-button>
          </template>

          <template #default="scope">
            <el-button
                size="small"
                @click="handleEdit(scope.$index, scope.row)"
            >Edit
            </el-button
            >
            <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
            >Delete
            </el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
  <!-- 弹出窗 -->
</template>

<script>
export default {
  inject: ['reload'],
  name: "CollectionList",
  data() {
    return {
      collections: [],
    };
  },
  methods: {
    addCollection() {
      this.$prompt("请输入新的集合名称", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^.+$/,
        inputErrorMessage: "集合名称不能为空",
      }).then(({value}) => {
        this.$axios
            .get("/dir/addDir1", {
              params: {name: value},
            })
            .then(() => {
              location.reload();
            });
        this.$message({
          type: "success",
          message: "新增集合是: " + value,
        });
      }).catch(() => {
        this.$message({
          type: "info",
          message: "取消输入",
        });
      });
    },
    handleDelete(index, value) {
      this.$confirm(
          "此操作将永久删除该集合及此集合下所有卡片, 是否继续?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
      ).then(() => {
        this.$axios
            .get("/dir/deleteDir1", {
              params: {dir1Id: value.id},
            })
            .then((response) => {
              if (response.status === 200) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                // 重新加载此页
                location.reload();
              } else {
                this.$message({
                  type: "info",
                  message: "删除失败!",
                });
              }
            });
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
      });
    },

    handleUpdate() {
      this.getDirList();
    },

    getDirList() {
      this.$axios.get("/dir/getAllDir1").then((response) => {
        this.collections = response.data;
      });
    }
  },
  created() {
    this.getDirList();
  },
};
</script>

<style>
.el-row {
  margin-bottom: 10px;
  margin-top: 10px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}
</style>
